Ant 您所在的位置:网站首页 column one 对不对 Ant

Ant

2023-09-17 05:51| 来源: 网络整理| 查看: 265

文章目录 使用 ant-design 官网上的 Table 固定样式代码实现效果展示查找问题解决方法

使用 ant-design 官网上的 Table 固定样式

链接: https://antdv.com/components/table-cn/#components-table-demo-fixed-columns 在这里插入图片描述

代码实现

由于我的项目要实现左边第一例为左固定,右边最后一列操作为右固定,按照官网上的操作一顿噼噼啪啪操作完后,效果图和代码如下: 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

效果展示

可以看到,我的 columns 列设置宽度的只有需要固定的列才添加了宽度。 添加完代码后,再次刷新页面查看页面效果,如下图: 在这里插入图片描述

查找问题

最后查看dom元素,发现问题所在,是固定的那些列被默认添加上了 50px 的高度,导致总体高度与我们没有添加固定列的那些高度不一致,出现了这种行没有对齐的问题。 在这里插入图片描述

解决方法

通过修改 css 将高度消除,达到行内对齐的需求 在这里插入图片描述

/deep/ .ant-table-tbody tr{ height: 50px !important; }

添加完样式后再次查看页面,发现成功修改!!! 在这里插入图片描述 这次也是公司内的前端小姐姐帮忙解决的,自己在网上各种查找问题,找了两个多小时也没有找到解决方案,最后还是靠的别人帮忙解决的,出现了这种问题,我压根就没有向去修改 css 样式这方面想,只想着百度百度,所以好言相劝,遇到问题可以钻研,但是为了不浪费时间,最好不要太钻牛角尖,自己摸索半个多小时还是没有效果,就需要请教别人了,如果是自己学习的过程中,那么就没这个必要了,毕竟自己摸索过经验更为丰富,这个告诫只是针对于公司开发的,少浪费时间,多写代码才是正道理



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有